import React, { useEffect, useRef } from 'react'
import { inject, observer } from 'mobx-react'
import { useEventEmitter } from 'ahooks'

import store from './store/video'
import Toolbar from './components/toolbar/toolbar'
import SplitScreens from './components/split-screens'
import Common from './store/common'
import './styles/video.css'

const Video = () => {
  const { w, h } = store.videoSize

  const mainRef = useRef()

  const event$ = useEventEmitter()
  Common.setEvent$(event$)

  return (
    <div className="video-main" ref={mainRef}>
      <div style={{ width: w, height: h, position: 'relative' }} id="videoWrap">
        <div className="video" id="video">
          <div className="screens">
            <SplitScreens />
          </div>
        </div>
      </div>
      <Toolbar mainRef={mainRef} />
    </div>
  )
}

// 监听observable的改变
export default observer(Video)
